<%--
  Created by IntelliJ IDEA.
  User: admin
  Date: 2021/6/23
  Time: 9:55 上午
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>我的订单</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <%--    引入layui样式--%>
    <link rel="stylesheet" href="/plugins/layui/css/layui.css">

    <%--    1. 引入bootstrap.css--%>
    <link rel="stylesheet" href="/plugins/bootstrap-3.4.1-dist/css/bootstrap.css">
    <%--    2. 引入自定义的css文件--%>
    <link rel="stylesheet" href="/css/nav.css">

    <style>
        .cart_img img{
            width: 65px;
            height: 65px;
        }
        .gray-bg {
            background-color: #f0f3f4;
        }
        .ibox-title {
            height: 41px;
            border-color: #edf1f2;
            background-color: #f6f8f8;
            color: #333;
            font-weight: 700;
            border-radius: 2px 2px 0 0;
            padding: 15px 15px 3px 15px;
            border-bottom: 1px solid transparent;
            display: block;
            clear: both;
        }

        .ibox-content {
            clear: both;
            background-color: #ffffff;
            color: inherit;
            padding: 15px 20px 20px 20px;
            border-color: #e7eaec;
            -webkit-border-image: none;
            -o-border-image: none;
            border-image: none;
            border-style: solid solid none;
            border-width: 1px 0px;
        }
        .ibox {
            margin-bottom: 20px;
            background-color: #fff;
            border: 1px solid #dee5e7;
            border-radius: 4px;
            -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
            box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
        }
        .wrapper {
            padding: 0 20px;
        }

        .wrapper-content {
            padding: 20px;
        }
    </style>

</head>
<body class="gray-bg">
    <%@ include file="../common/nav.jsp"%>
    <div class="wrapper wrapper-content  animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox ">
                    <div class="ibox-title">
                        <h5>车次列表</h5>
                    </div>
                    <div class="ibox-content">
                        <!--标题 -->
                        <div class="row">
                            <div class="col-md-12">
                                <h1>车票管理</h1>
                            </div>
                        </div>
                        <!--按钮 -->
                        <br>
                        <!--显示表格数据 -->
                        <div class="row">
                            <div class="table-responsive col-md-12">
                                <table class="table table-hover" id="trips_table">
                                    <thead>
                                    <tr>
                                        <th>
                                            <input type="checkbox" id="check_all">
                                        </th>
                                        <th>ID</th>
                                        <th>车次</th>
                                        <th>始发站</th>
                                        <th>终到站</th>
                                        <th>数量</th>
                                        <th>价格</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <c:forEach items="${trainList}" var="c" varStatus="vs">
                                        <tr>
                                            <td><input type="checkbox" class="form-control"></td>
                                            <td>${vs.count}</td>
                                            <td>${c.trainTrainNum}</td>
                                            <td>${c.trainDepartureSta}</td>
                                            <td>${c.trainTerminalSta}</td>
                                            <td><input onblur="change_num(this,${c.id})" type="number" style="width: 50%" value="${c.counts}" class="form-control"></td>
                                            <td>${c.price}</td>
                                            <td><button class="btn btn-link" onclick="del_cart2(this,${c.id})"><a href="#" class="text-danger"><span class="glyphicon glyphicon-trash"></span></a></button></td>
                                        </tr>
                                    </c:forEach>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        function del_cart(id){
            layer.confirm('确认删除吗?', function(index){
                //确定按钮
                window.location="/train/del?id="+id;
                //关闭这个询问框
                layer.close(index);
            })
        }
        function del_cart2(obj,cid){

            layer.confirm('确认退票吗?', function(index){

                $.get('/train/ajaxDel',{id:cid},function(data){
                    if(data.code=="200"){
                        //直接使用js操作dom
                        //js删除所在的删除行
                        //obj是一个js对象
                        //js对象要转换成jquery对象 - $(js对象)

                        $(obj).parent().parent().remove();
                        layer.msg('退票成功')
                    }
                    //关闭这个询问框
                    layer.close(index);
                });
            })
        }

        // 更新数量的函数
        function change_num(obj,id){//obj - this当前对象 - input对象,js对象.属性
            $.get('/train/update',{id:id,counts:obj.value},function(data){//ajax操作
                if(data.code=="200"){
                    //js操作dom
                    //1. 获取页面的单价
                    let p_price = parseFloat($(obj).parent().prev().html());
                    //2. 计算最新的总价
                    let total = parseFloat(obj.value)*p_price;
                    //3. 将总价重新填充到页面中
                    let next_td = $(obj).parent().next();
                    //html() - 没有参数,获取标签内部的元素
                    //html(参数) - 将参数设置到标签内部
                    next_td.html(total.toFixed(1));
                }
            })
        }
    </script>

    <%--    引入layui - js--%>
    <script type="text/javascript" src="/plugins/layui/layui.js"></script>

    <%--    2. 先引入jquery.min.js--%>
    <script type="text/javascript" src="/plugins/jquery/jquery.min.js"></script>
    <%--    3. 引入bootstrap.js文件--%>
    <script type="text/javascript" src="/plugins/bootstrap-3.4.1-dist/js/bootstrap.js"></script>

</body>
</html>
